<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a" style="margin-bottom: 200px">
    <el-pagination ref="p"
            background page-size="100" current-page="1"
            layout="first, pager, last, prev, next"
            :total="1000"
            :page-sizes="[20,50,100,200]">
    </el-pagination>
</div>
<script>
    Vue.component("el-pagination",{
        props :["background","page-size","current-page","layout","total","page-sizes"],
        template : `
            <div>
                <select v-if="pageSizes != undefined"
                    v-model="selectSize" @change="pageSize = selectSize">
                    <option v-for="size in pageSizes" :value="size">每页{{size}}行</option>
                </select>
                <template v-for=" l in layouts ">
                    <span v-if="l=='first'" class="pager" style="background-color: #eee">第一页</span>
                    <span v-if="l=='prev'" class="pager"
                        :style="getStyle(0)"
                        @click="curPage += (curPage==1?0:-1)">上一页</span>
                    <span v-if="l=='pager'" class="pager" v-for=" p in pages"
                        :style="getStyle(p)"
                        @click="curPage = p">{{p}}</span>
                    <span v-if="l=='next'" class="pager"
                        :style="getStyle(0)"
                        @click="curPage += (curPage==pages?0:1)">下一页</span>
                    <span v-if="l=='last'" class="pager" style="background-color: #eee">最后一页</span>
                </template>
            </div>
        `,
        data(){
            return {
                curPage : 1,
                layouts : [],
                selectSize : 0
            };
        },
        created(){
            this.curPage = parseInt(this.currentPage);
            // 字符串切割数组
            this.layouts = this.layout.split(/\W+/);
            this.selectSize = this.pageSize;
        },
        computed:{
            // 总页数
            pages(){
                let all = this.total / this.pageSize;
                all = Math.floor(all); // 取整
                if(this.total % this.pageSize != 0){
                    all ++;
                }
                return all;
            }
        },
        methods:{
            getStyle(p){
                let ret = {backgroundColor : null};
                if(this.background!=undefined){
                   ret.backgroundColor = '#eee';
                }
                if(p == this.curPage){
                    ret.backgroundColor = '#aaa';
                }
                return ret;
            }
        }
    })

    /**
     *  扩展实现:
     *      1. layout 的顺序, 可以决定按钮的顺序
     *      2. 实现每页行数可选
      */


    var v = new Vue({
        el :"#a",
        data : {

        }
    })
</script>
<style>
    .pager{
        display: inline-block;
        text-align: center;
        min-width: 20px;
        padding: 5px;
        margin: 5px;
        border-radius: 3px;
        cursor: pointer;
    }

</style>


</body>
</html>